<template>
  <div id="box">
    <van-grid :column-num="4" :icon-size="40" :border="false">
      <van-grid-item
        v-for="item2 in list"
        :key="item2.food_category_id"
        :icon="item2.img"
        :text="item2.name"
        @click="
          store.changeParams({
            food_category_id: item2.food_category_id,
            title: item2.name,
          }),
            $router.push(
              '/nbnc/list?food_category_id=' + item2.food_category_id
            )
        "
      />
    </van-grid>
    <p class="null"></p>
    <van-tabs
      v-model:active1="active1"
      @click-tab="onClickTab"
      style="border-bottom: 1px solid #efefef"
    >
      <van-tab v-for="item2 in title2" :key="item2.stage" :title="item2.name">
      </van-tab>
    </van-tabs>
    <div class="title3">
      <p>
        <button
          v-for="item3 in title3"
          :key="item3.stage_value"
          :class="{ active: name == item3.name }"
          @click="
            (name = item3.name),
              store.changeParams({ stage_value: item3.stage_value })
          "
        >
          {{ item3.name }}
        </button>
      </p>
      <van-icon name="question" @click="show = true" color="#ccc" size="20" />
    </div>
    <van-popup style="width: 100%" v-model:show="show">
      <div class="CPM">
        <div class="li" v-for="item in liList" :key="item.title">
          <h2><span></span>{{ item.title }}</h2>
          <p>{{ item.info }}</p>
        </div>
        <van-button
          type="success"
          style="
            width: 100%;
            border-radius: 30px;
            font-weight: bold;
            font-size: 20px;
          "
          @click="show = false"
          >知道啦</van-button
        >
      </div>
    </van-popup>
    <FoodList :spanList="spanList" />
  </div>
</template>
<script setup>
let props = defineProps(["list", "title2", "spanList"]);
import FoodList from "../../components/Nbnc/FoodList.vue";
import { ref, watch } from "vue";
import { useCount } from "../../store/index";
import { useRouter } from "vue-router";
let router = useRouter();
let store = useCount();
const active1 = ref(0);
const show = ref(false);
store.changeParams({ stage: "one", stage_value: 3 });
let name = ref("不能吃");
let title3 = ref([
  {
    name: "不能吃",
    stage_value: 3,
  },
  {
    name: "不推荐",
    stage_value: 2,
  },
]);
let arr = ref(props.title2);

let onClickTab = ({ title }) => {
  let li = arr.value.filter((item) => item.name == title);
  console.log(li[0].stage);
  store.changeParams({ stage: li[0].stage });
};
let liList = ref([
  {
    title: "不能吃",
    info: "有证据表明宠物使用后会产生危害",
  },
  {
    title: "不推荐吃",
    info: "没有严谨科学证据表明宠物食用即会产生严重危害，但有大概率会对宠物的身体产生负面影响",
  },
]);
</script>
<style scoped>
#box {
  width: 100%;
}
.null {
  width: 100%;
  height: 25px;
  background-color: #f8f8f8;
}
.title3 {
  width: 90%;
  margin: 30px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title3 p {
  display: flex;
  justify-content: space-between;
}
.title3 p button {
  width: 150px;
  height: 50px;
  border: none;
  border-radius: 30px;
  font-size: 28px;
  margin-right: 35px;
}
.active {
  background-color: #fe8081;
  color: white;
  font-weight: bold;
}
.CPM {
  width: 100%;
  padding: 68px 80px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.li {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60px;
}
.li h2 {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.li h2 span {
  width: 20px;
  height: 20px;
  display: flex;
  border-radius: 50%;
  background-color: #1ec7af;
  margin-right: 20px;
}
.li p {
  color: #969696;
  font-size: 30px;
  text-align: center;
}
</style>